<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>干净的图表Demo</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link type="text/css" rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
  <script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
  <!--<script src="https://cdn.hcharts.cn/highcharts/5.0.10/highcharts.js"></script>-->
  <script type="text/javascript" src="../code/highcharts.js"></script>
</head>
<body>
<main class="main" role="main">
  <div class="container">
    <div id="demos" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 default">
      <div class="container">
        <!--线型图-->
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 title">
            <h2 id="line-charts">线型图</h2>
          </div>
          <!--Basic line-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>Basic line</h3></div>
            <div id="line-basic"></div>
            <script type="text/javascript">
              Highcharts.chart('line-basic', {

                title: {
                  text: '各部门的太阳能就业成长, 2010-2016'
                },

                subtitle: {
                  text: '来源：thesolarfoundation.com'
                },

                yAxis: {
                  title: {
                    text: '员工人数'
                  }
                },
                legend: {
                  layout: 'vertical',
                  align: 'right',
                  verticalAlign: 'middle'
                },

                plotOptions: {
                  series: {
                    pointStart: 2010
                  }
                },

                series: [{
                  name: '新浪',
                  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
                }, {
                  name: '腾讯',
                  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
                }, {
                  name: '阿里',
                  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
                }, {
                  name: '百度',
                  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
                }, {
                  name: '其他',
                  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
                }]

              });
            </script>
            <div class="clearfix"></div>
          </div>
          <!--line-labels-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>line-labels</h3></div>
            <div id="line-labels"></div>
            <script type="text/javascript">
              Highcharts.chart('line-labels', {
                chart: {
                  type: 'line'
                },
                title: {
                  text: 'Monthly Average Temperature'
                },
                subtitle: {
                  text: 'Source: WorldClimate.com'
                },
                xAxis: {
                  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                yAxis: {
                  title: {
                    text: 'Temperature (°C)'
                  }
                },
                plotOptions: {
                  line: {
                    dataLabels: {
                      enabled: true
                    },
                    enableMouseTracking: false
                  }
                },
                series: [{
                  name: 'Tokyo',
                  data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                }, {
                  name: 'London',
                  data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                }]
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <!--ine-log-axis-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>line-log-axis</h3></div>
            <div id="line-log-axis" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
            <script type="text/javascript">

              Highcharts.chart('line-log-axis', {

                title: {
                  text: 'Logarithmic axis demo'
                },

                xAxis: {
                  tickInterval: 1
                },

                yAxis: {
                  type: 'logarithmic',
                  minorTickInterval: 0.1
                },

                tooltip: {
                  headerFormat: '<b>{series.name}</b><br />',
                  pointFormat: 'x = {point.x}, y = {point.y}'
                },

                series: [{
                  data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
                  pointStart: 1
                }]
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <!--line-time-series-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>line-time-series</h3></div>
            <div id="line-time-series"></div>
            <script type="text/javascript">

              $.getJSON('https://data.jianshukeji.com/jsonp?filename=json/usdeur.json&callback=?', function (data) {

                Highcharts.chart('line-time-series', {
                  chart: {
                    zoomType: 'x'
                  },
                  title: {
                    text: 'USD to EUR exchange rate over time'
                  },
                  subtitle: {
                    text: document.ontouchstart === undefined ?
                      'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
                  },
                  xAxis: {
                    type: 'datetime'
                  },
                  yAxis: {
                    title: {
                      text: 'Exchange rate'
                    }
                  },
                  legend: {
                    enabled: false
                  },
                  plotOptions: {
                    area: {
                      fillColor: {
                        linearGradient: {
                          x1: 0,
                          y1: 0,
                          x2: 0,
                          y2: 1
                        },
                        stops: [
                          [0, Highcharts.getOptions().colors[0]],
                          [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                      },
                      marker: {
                        radius: 2
                      },
                      lineWidth: 1,
                      states: {
                        hover: {
                          lineWidth: 1
                        }
                      },
                      threshold: null
                    }
                  },

                  series: [{
                    type: 'area',
                    name: 'USD to EUR',
                    data: data
                  }]
                });
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <!--line-ajax-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>line-ajax</h3></div>
            <div id="line-ajax"></div>
            <script type="text/javascript">
              // Get the CSV and create the chart
              $.getJSON('https://data.jianshukeji.com/jsonp?filename=json/analytics.csv&callback=?', function (csv) {

                Highcharts.chart('line-ajax', {

                  data: {
                    csv: csv
                  },

                  title: {
                    text: 'Daily visits at www.highcharts.com'
                  },

                  subtitle: {
                    text: 'Source: Google Analytics'
                  },

                  xAxis: {
                    tickInterval: 7 * 24 * 3600 * 1000, // one week
                    tickWidth: 0,
                    gridLineWidth: 1,
                    labels: {
                      align: 'left',
                      x: 3,
                      y: -3
                    }
                  },

                  yAxis: [{ // left y axis
                    title: {
                      text: null
                    },
                    labels: {
                      align: 'left',
                      x: 3,
                      y: 16,
                      format: '{value:.,0f}'
                    },
                    showFirstLabel: false
                  }, { // right y axis
                    linkedTo: 0,
                    gridLineWidth: 0,
                    opposite: true,
                    title: {
                      text: null
                    },
                    labels: {
                      align: 'right',
                      x: -3,
                      y: 16,
                      format: '{value:.,0f}'
                    },
                    showFirstLabel: false
                  }],

                  legend: {
                    align: 'left',
                    verticalAlign: 'top',
                    y: 20,
                    floating: true,
                    borderWidth: 0
                  },

                  tooltip: {
                    shared: true,
                    crosshairs: true
                  },

                  plotOptions: {
                    series: {
                      cursor: 'pointer',
                      point: {
                        events: {
                          click: function (e) {
                            hs.htmlExpand(null, {
                              pageOrigin: {
                                x: e.pageX || e.clientX,
                                y: e.pageY || e.clientY
                              },
                              headingText: this.series.name,
                              maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
                              this.y + ' visits',
                              width: 200
                            });
                          }
                        }
                      },
                      marker: {
                        lineWidth: 1
                      }
                    }
                  },

                  series: [{
                    name: 'All visits',
                    lineWidth: 4,
                    marker: {
                      radius: 4
                    }
                  }, {
                    name: 'New visitors'
                  }]
                });
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <div class="clearfix visible-lg visible-md"></div>
          <div class="clearfix visible-sm visible-xs"></div>
        </div>
        <!--面积图-->
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 title">
            <h2 id="area-charts">面积图</h2>
          </div>
          <!--Basic area-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>Basic area</h3></div>
            <div id="basic-area"></div>
            <script type="text/javascript">

              Highcharts.chart('basic-area', {
                chart: {
                  type: 'area'
                },
                title: {
                  text: 'US and USSR nuclear stockpiles'
                },
                subtitle: {
                  text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
                  'thebulletin.metapress.com</a>'
                },
                xAxis: {
                  allowDecimals: false,
                  labels: {
                    formatter: function () {
                      return this.value; // clean, unformatted number for year
                    }
                  }
                },
                yAxis: {
                  title: {
                    text: 'Nuclear weapon states'
                  },
                  labels: {
                    formatter: function () {
                      return this.value / 1000 + 'k';
                    }
                  }
                },
                tooltip: {
                  pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
                },
                plotOptions: {
                  area: {
                    pointStart: 1940,
                    marker: {
                      enabled: false,
                      symbol: 'circle',
                      radius: 2,
                      states: {
                        hover: {
                          enabled: true
                        }
                      }
                    }
                  }
                },
                series: [{
                  name: 'USA',
                  data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
                    1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
                    27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
                    26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
                    24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
                    22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
                    10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
                }, {
                  name: 'USSR/Russia',
                  data: [null, null, null, null, null, null, null, null, null, null,
                    5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
                    4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
                    15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
                    33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
                    35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
                    21000, 20000, 19000, 18000, 18000, 17000, 16000]
                }]
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <!--area-inverted-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>area-inverted</h3></div>
            <div id="area-inverted"></div>
            <script type="text/javascript">

              Highcharts.chart('area-inverted', {
                chart: {
                  type: 'area',
                  inverted: true
                },
                title: {
                  text: 'Average fruit consumption during one week'
                },
                subtitle: {
                  style: {
                    position: 'absolute',
                    right: '0px',
                    bottom: '10px'
                  }
                },
                legend: {
                  layout: 'vertical',
                  align: 'right',
                  verticalAlign: 'top',
                  x: -150,
                  y: 100,
                  floating: true,
                  borderWidth: 1,
                  backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
                },
                xAxis: {
                  categories: [
                    'Monday',
                    'Tuesday',
                    'Wednesday',
                    'Thursday',
                    'Friday',
                    'Saturday',
                    'Sunday'
                  ]
                },
                yAxis: {
                  title: {
                    text: 'Number of units'
                  },
                  labels: {
                    formatter: function () {
                      return this.value;
                    }
                  },
                  min: 0
                },
                plotOptions: {
                  area: {
                    fillOpacity: 0.5
                  }
                },
                series: [{
                  name: 'John',
                  data: [3, 4, 3, 5, 4, 10, 12]
                }, {
                  name: 'Jane',
                  data: [1, 3, 4, 3, 3, 5, 4]
                }]
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <!--area-missing-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>area-missing</h3></div>
            <div id="area-missing"></div>
            <script type="text/javascript">
              Highcharts.chart('area-missing', {
                chart: {
                  type: 'area',
                  spacingBottom: 30
                },
                title: {
                  text: 'Fruit consumption *'
                },
                subtitle: {
                  text: '* Jane\'s banana consumption is unknown',
                  floating: true,
                  align: 'right',
                  verticalAlign: 'bottom',
                  y: 15
                },
                legend: {
                  layout: 'vertical',
                  align: 'left',
                  verticalAlign: 'top',
                  x: 150,
                  y: 100,
                  floating: true,
                  borderWidth: 1,
                  backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
                },
                xAxis: {
                  categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']
                },
                yAxis: {
                  title: {
                    text: 'Y-Axis'
                  },
                  labels: {
                    formatter: function () {
                      return this.value;
                    }
                  }
                },
                tooltip: {
                  formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                      this.x + ': ' + this.y;
                  }
                },
                plotOptions: {
                  area: {
                    fillOpacity: 0.5
                  }
                },
                credits: {
                  enabled: false
                },
                series: [{
                  name: 'John',
                  data: [0, 1, 4, 4, 5, 2, 3, 7]
                }, {
                  name: 'Jane',
                  data: [1, 0, 3, null, 3, 1, 2, 1]
                }]
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <!--area-stacked-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>area-stacked</h3></div>
            <div id="area-stacked"></div>
            <script type="text/javascript">
              Highcharts.chart('area-stacked', {
                chart: {
                  type: 'area'
                },
                title: {
                  text: 'Historic and Estimated Worldwide Population Growth by Region'
                },
                subtitle: {
                  text: 'Source: Wikipedia.org'
                },
                xAxis: {
                  categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
                  tickmarkPlacement: 'on',
                  title: {
                    enabled: false
                  }
                },
                yAxis: {
                  title: {
                    text: 'Billions'
                  },
                  labels: {
                    formatter: function () {
                      return this.value / 1000;
                    }
                  }
                },
                tooltip: {
                  split: true,
                  valueSuffix: ' millions'
                },
                plotOptions: {
                  area: {
                    stacking: 'normal',
                    lineColor: '#666666',
                    lineWidth: 1,
                    marker: {
                      lineWidth: 1,
                      lineColor: '#666666'
                    }
                  }
                },
                series: [{
                  name: 'Asia',
                  data: [502, 635, 809, 947, 1402, 3634, 5268]
                }, {
                  name: 'Africa',
                  data: [106, 107, 111, 133, 221, 767, 1766]
                }, {
                  name: 'Europe',
                  data: [163, 203, 276, 408, 547, 729, 628]
                }, {
                  name: 'America',
                  data: [18, 31, 54, 156, 339, 818, 1201]
                }, {
                  name: 'Oceania',
                  data: [2, 2, 2, 6, 13, 30, 46]
                }]
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <div class="clearfix visible-sm visible-xs"></div>
        </div>
        <!--条形图-->
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 title">
            <h2 id="column-and-bar-charts">条形图</h2>
          </div>
          <!--bar-basic-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>bar-basic </h3></div>
            <div id="bar-basic"></div>
            <script type="text/javascript">
              Highcharts.chart('bar-basic', {
                chart: {
                  type: 'bar'
                },
                title: {
                  text: 'Historic World Population by Region'
                },
                subtitle: {
                  text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
                },
                xAxis: {
                  categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
                  title: {
                    text: null
                  }
                },
                yAxis: {
                  min: 0,
                  title: {
                    text: 'Population (millions)',
                    align: 'high'
                  },
                  labels: {
                    overflow: 'justify'
                  }
                },
                tooltip: {
                  valueSuffix: ' millions'
                },
                plotOptions: {
                  bar: {
                    dataLabels: {
                      enabled: true
                    }
                  }
                },
                legend: {
                  layout: 'vertical',
                  align: 'right',
                  verticalAlign: 'top',
                  x: -40,
                  y: 80,
                  floating: true,
                  borderWidth: 1,
                  backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                  shadow: true
                },
                credits: {
                  enabled: false
                },
                series: [{
                  name: 'Year 1800',
                  data: [107, 31, 635, 203, 2]
                }, {
                  name: 'Year 1900',
                  data: [133, 156, 947, 408, 6]
                }, {
                  name: 'Year 2012',
                  data: [1052, 954, 4250, 740, 38]
                }]
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <!--bar-stacked-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>Stacked bar</h3></div>
            <div id="bar-stacked"></div>
            <script type="text/javascript">
              Highcharts.chart('bar-stacked', {
                chart: {
                  type: 'bar'
                },
                title: {
                  text: 'Stacked bar chart'
                },
                xAxis: {
                  categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
                },
                yAxis: {
                  min: 0,
                  title: {
                    text: 'Total fruit consumption'
                  }
                },
                legend: {
                  reversed: true
                },
                plotOptions: {
                  series: {
                    stacking: 'normal'
                  }
                },
                series: [{
                  name: 'John',
                  data: [5, 3, 4, 7, 2]
                }, {
                  name: 'Jane',
                  data: [2, 2, 3, 2, 1]
                }, {
                  name: 'Joe',
                  data: [3, 4, 4, 2, 5]
                }]
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <!--bar-negative-stack-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>Bar with negative stack</h3>
            </div>
            <div id="bar-negative-stack"></div>
            <script type="text/javascript">
              // Data gathered from http://populationpyramid.net/germany/2015/

              // Age categories
              var categories = ['0-4', '5-9', '10-14', '15-19',
                '20-24', '25-29', '30-34', '35-39', '40-44',
                '45-49', '50-54', '55-59', '60-64', '65-69',
                '70-74', '75-79', '80-84', '85-89', '90-94',
                '95-99', '100 + '];
              $(document).ready(function () {
                Highcharts.chart('bar-negative-stack', {
                  chart: {
                    type: 'bar'
                  },
                  title: {
                    text: 'Population pyramid for Germany, 2015'
                  },
                  subtitle: {
                    text: 'Source: <a href="http://populationpyramid.net/germany/2015/">Population Pyramids of the World from 1950 to 2100</a>'
                  },
                  xAxis: [{
                    categories: categories,
                    reversed: false,
                    labels: {
                      step: 1
                    }
                  }, { // mirror axis on right side
                    opposite: true,
                    reversed: false,
                    categories: categories,
                    linkedTo: 0,
                    labels: {
                      step: 1
                    }
                  }],
                  yAxis: {
                    title: {
                      text: null
                    },
                    labels: {
                      formatter: function () {
                        return Math.abs(this.value) + '%';
                      }
                    }
                  },

                  plotOptions: {
                    series: {
                      stacking: 'normal'
                    }
                  },

                  tooltip: {
                    formatter: function () {
                      return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
                        'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
                    }
                  },

                  series: [{
                    name: 'Male',
                    data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
                      -3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
                      -2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
                  }, {
                    name: 'Female',
                    data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
                      3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
                      1.8, 1.2, 0.6, 0.1, 0.0]
                  }]
                });
              });

            </script>
            <div class="clearfix"></div>
          </div>
          <div class="clearfix visible-lg visible-md"></div>
        </div>
        <!--柱条形图-->
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 title">
            <h2 id="column">柱条形图</h2>
          </div>
          <!--column-basic-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>column-basic</h3></div>
            <div id="column-basic"></div>
            <script type="text/javascript">
              Highcharts.chart('column-basic', {
                chart: {
                  type: 'column'
                },
                title: {
                  text: 'Monthly Average Rainfall'
                },
                subtitle: {
                  text: 'Source: WorldClimate.com'
                },
                xAxis: {
                  categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'
                  ],
                  crosshair: true
                },
                yAxis: {
                  min: 0,
                  title: {
                    text: 'Rainfall (mm)'
                  }
                },
                tooltip: {
                  headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                  pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                  '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                  footerFormat: '</table>',
                  shared: true,
                  useHTML: true
                },
                plotOptions: {
                  column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                  }
                },
                series: [{
                  name: 'Tokyo',
                  data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

                }, {
                  name: 'New York',
                  data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

                }, {
                  name: 'London',
                  data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

                }, {
                  name: 'Berlin',
                  data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

                }]
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <!--column-drilldown-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>column-drilldown</h3></div>
            <div id="column-drilldown"></div>
            <script type="text/javascript">
              // Create the chart
              Highcharts.chart('column-drilldown', {
                chart: {
                  type: 'column'
                },
                title: {
                  text: 'Browser market shares. January, 2015 to May, 2015'
                },
                subtitle: {
                  text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.'
                },
                xAxis: {
                  type: 'category'
                },
                yAxis: {
                  title: {
                    text: 'Total percent market share'
                  }

                },
                legend: {
                  enabled: false
                },
                plotOptions: {
                  series: {
                    borderWidth: 0,
                    dataLabels: {
                      enabled: true,
                      format: '{point.y:.1f}%'
                    }
                  }
                },

                tooltip: {
                  headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                  pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
                },

                series: [{
                  name: 'Brands',
                  colorByPoint: true,
                  data: [{
                    name: 'Microsoft Internet Explorer',
                    y: 56.33,
                    drilldown: 'Microsoft Internet Explorer'
                  }, {
                    name: 'Chrome',
                    y: 24.03,
                    drilldown: 'Chrome'
                  }, {
                    name: 'Firefox',
                    y: 10.38,
                    drilldown: 'Firefox'
                  }, {
                    name: 'Safari',
                    y: 4.77,
                    drilldown: 'Safari'
                  }, {
                    name: 'Opera',
                    y: 0.91,
                    drilldown: 'Opera'
                  }, {
                    name: 'Proprietary or Undetectable',
                    y: 0.2,
                    drilldown: null
                  }]
                }],
                drilldown: {
                  series: [{
                    name: 'Microsoft Internet Explorer',
                    id: 'Microsoft Internet Explorer',
                    data: [
                      [
                        'v11.0',
                        24.13
                      ],
                      [
                        'v8.0',
                        17.2
                      ],
                      [
                        'v9.0',
                        8.11
                      ],
                      [
                        'v10.0',
                        5.33
                      ],
                      [
                        'v6.0',
                        1.06
                      ],
                      [
                        'v7.0',
                        0.5
                      ]
                    ]
                  }, {
                    name: 'Chrome',
                    id: 'Chrome',
                    data: [
                      [
                        'v40.0',
                        5
                      ],
                      [
                        'v41.0',
                        4.32
                      ],
                      [
                        'v42.0',
                        3.68
                      ],
                      [
                        'v39.0',
                        2.96
                      ],
                      [
                        'v36.0',
                        2.53
                      ],
                      [
                        'v43.0',
                        1.45
                      ],
                      [
                        'v31.0',
                        1.24
                      ],
                      [
                        'v35.0',
                        0.85
                      ],
                      [
                        'v38.0',
                        0.6
                      ],
                      [
                        'v32.0',
                        0.55
                      ],
                      [
                        'v37.0',
                        0.38
                      ],
                      [
                        'v33.0',
                        0.19
                      ],
                      [
                        'v34.0',
                        0.14
                      ],
                      [
                        'v30.0',
                        0.14
                      ]
                    ]
                  }, {
                    name: 'Firefox',
                    id: 'Firefox',
                    data: [
                      [
                        'v35',
                        2.76
                      ],
                      [
                        'v36',
                        2.32
                      ],
                      [
                        'v37',
                        2.31
                      ],
                      [
                        'v34',
                        1.27
                      ],
                      [
                        'v38',
                        1.02
                      ],
                      [
                        'v31',
                        0.33
                      ],
                      [
                        'v33',
                        0.22
                      ],
                      [
                        'v32',
                        0.15
                      ]
                    ]
                  }, {
                    name: 'Safari',
                    id: 'Safari',
                    data: [
                      [
                        'v8.0',
                        2.56
                      ],
                      [
                        'v7.1',
                        0.77
                      ],
                      [
                        'v5.1',
                        0.42
                      ],
                      [
                        'v5.0',
                        0.3
                      ],
                      [
                        'v6.1',
                        0.29
                      ],
                      [
                        'v7.0',
                        0.26
                      ],
                      [
                        'v6.2',
                        0.17
                      ]
                    ]
                  }, {
                    name: 'Opera',
                    id: 'Opera',
                    data: [
                      [
                        'v12.x',
                        0.34
                      ],
                      [
                        'v28',
                        0.24
                      ],
                      [
                        'v27',
                        0.17
                      ],
                      [
                        'v29',
                        0.16
                      ]
                    ]
                  }]
                }
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <!--column-negative-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>column-negative</h3>
            </div>
            <div id="column-negative"></div>
            <script type="text/javascript">
              Highcharts.chart('column-negative', {
                chart: {
                  type: 'column'
                },
                title: {
                  text: 'Column chart with negative values'
                },
                xAxis: {
                  categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
                },
                credits: {
                  enabled: false
                },
                series: [{
                  name: 'John',
                  data: [5, 3, 4, 7, 2]
                }, {
                  name: 'Jane',
                  data: [2, -2, -3, 2, 1]
                }, {
                  name: 'Joe',
                  data: [3, 4, 4, -2, 5]
                }]
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <!--column-parsed-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>column-parsed</h3>
            </div>
            <div id="column-parsed"></div>
            <table id="datatable">
              <thead>
              <tr>
                <th></th>
                <th>Jane</th>
                <th>John</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <th>Apples</th>
                <td>3</td>
                <td>4</td>
              </tr>
              <tr>
                <th>Pears</th>
                <td>2</td>
                <td>0</td>
              </tr>
              <tr>
                <th>Plums</th>
                <td>5</td>
                <td>11</td>
              </tr>
              <tr>
                <th>Bananas</th>
                <td>1</td>
                <td>1</td>
              </tr>
              <tr>
                <th>Oranges</th>
                <td>2</td>
                <td>4</td>
              </tr>
              </tbody>
            </table>
            <script type="text/javascript">

              Highcharts.chart('column-parsed', {
                data: {
                  table: 'datatable'
                },
                chart: {
                  type: 'column'
                },
                title: {
                  text: 'Data extracted from a HTML table in the page'
                },
                yAxis: {
                  allowDecimals: false,
                  title: {
                    text: 'Units'
                  }
                },
                tooltip: {
                  formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                      this.point.y + ' ' + this.point.name.toLowerCase();
                  }
                }
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <!--column-negative-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>column-negative</h3>
            </div>
            <div id="column-negative"></div>
            <script type="text/javascript">
              Highcharts.chart('column-negative', {
                chart: {
                  type: 'column'
                },
                title: {
                  text: 'Column chart with negative values'
                },
                xAxis: {
                  categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
                },
                credits: {
                  enabled: false
                },
                series: [{
                  name: 'John',
                  data: [5, 3, 4, 7, 2]
                }, {
                  name: 'Jane',
                  data: [2, -2, -3, 2, 1]
                }, {
                  name: 'Joe',
                  data: [3, 4, 4, -2, 5]
                }]
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <div class="clearfix visible-lg visible-md"></div>
        </div>
        <!--组合图-->
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 title">
            <h2 id="combo">组合图</h2>
          </div>
          <!--combo-basic-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>combo-basic</h3></div>
            <div id="combo-basic"></div>
            <script type="text/javascript">

              Highcharts.chart('combo-basic', {
                title: {
                  text: 'Combination chart'
                },
                xAxis: {
                  categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
                },
                labels: {
                  items: [{
                    html: 'Total fruit consumption',
                    style: {
                      left: '50px',
                      top: '18px',
                      color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                    }
                  }]
                },
                series: [{
                  type: 'column',
                  name: 'Jane',
                  data: [3, 2, 1, 3, 4]
                }, {
                  type: 'column',
                  name: 'John',
                  data: [2, 3, 5, 7, 6]
                }, {
                  type: 'column',
                  name: 'Joe',
                  data: [4, 3, 3, 9, 0]
                }, {
                  type: 'spline',
                  name: 'Average',
                  data: [3, 2.67, 3, 6.33, 3.33],
                  marker: {
                    lineWidth: 2,
                    lineColor: Highcharts.getOptions().colors[3],
                    fillColor: 'white'
                  }
                }, {
                  type: 'pie',
                  name: 'Total consumption',
                  data: [{
                    name: 'Jane',
                    y: 13,
                    color: Highcharts.getOptions().colors[0] // Jane's color
                  }, {
                    name: 'John',
                    y: 23,
                    color: Highcharts.getOptions().colors[1] // John's color
                  }, {
                    name: 'Joe',
                    y: 19,
                    color: Highcharts.getOptions().colors[2] // Joe's color
                  }],
                  center: [100, 80],
                  size: 100,
                  showInLegend: false,
                  dataLabels: {
                    enabled: false
                  }
                }]
              });


            </script>
            <div class="clearfix"></div>
          </div>
          <!--combo-dual-axes-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>combo-dual-axes</h3></div>
            <div id="combo-dual-axes"></div>
            <script type="text/javascript">
              Highcharts.chart('combo-dual-axes', {
                chart: {
                  zoomType: 'xy'
                },
                title: {
                  text: 'Average Monthly Temperature and Rainfall in Tokyo'
                },
                subtitle: {
                  text: 'Source: WorldClimate.com'
                },
                xAxis: [{
                  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                  crosshair: true
                }],
                yAxis: [{ // Primary yAxis
                  labels: {
                    format: '{value}°C',
                    style: {
                      color: Highcharts.getOptions().colors[1]
                    }
                  },
                  title: {
                    text: 'Temperature',
                    style: {
                      color: Highcharts.getOptions().colors[1]
                    }
                  }
                }, { // Secondary yAxis
                  title: {
                    text: 'Rainfall',
                    style: {
                      color: Highcharts.getOptions().colors[0]
                    }
                  },
                  labels: {
                    format: '{value} mm',
                    style: {
                      color: Highcharts.getOptions().colors[0]
                    }
                  },
                  opposite: true
                }],
                tooltip: {
                  shared: true
                },
                legend: {
                  layout: 'vertical',
                  align: 'left',
                  x: 120,
                  verticalAlign: 'top',
                  y: 100,
                  floating: true,
                  backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
                },
                series: [{
                  name: 'Rainfall',
                  type: 'column',
                  yAxis: 1,
                  data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                  tooltip: {
                    valueSuffix: ' mm'
                  }

                }, {
                  name: 'Temperature',
                  type: 'spline',
                  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
                  tooltip: {
                    valueSuffix: '°C'
                  }
                }]
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <!--combo-histogram-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>combo-histogram</h3>
            </div>
            <div id="combo-histogram"></div>
            <script type="text/javascript">
              var data = [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
                [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
                [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
                [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
                [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
                [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
                [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
                [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
                [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
                [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
                [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
                [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
                [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
                [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
                [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
                [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
                [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
                [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
                [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
                [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
                [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
                [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
                [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
                [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
                [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
                [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
                [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
                [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
                [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
                [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
                [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
                [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
                [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
                [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
                [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
                [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
                [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
                [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
                [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
                [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
                [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
                [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
                [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
                [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
                [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
                [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
                [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
                [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
                [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
                [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
                [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
                [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]];

              /**
               * Get histogram data out of xy data
               * @param   {Array} data  Array of tuples [x, y]
               * @param   {Number} step Resolution for the histogram
               * @returns {Array}       Histogram data
               */
              function histogram(data, step) {
                var histo = {},
                  x,
                  i,
                  arr = [];

                // Group down
                for (i = 0; i < data.length; i++) {
                  x = Math.floor(data[i][0] / step) * step;
                  if (!histo[x]) {
                    histo[x] = 0;
                  }
                  histo[x]++;
                }

                // Make the histo group into an array
                for (x in histo) {
                  if (histo.hasOwnProperty((x))) {
                    arr.push([parseFloat(x), histo[x]]);
                  }
                }

                // Finally, sort the array
                arr.sort(function (a, b) {
                  return a[0] - b[0];
                });

                return arr;
              }

              Highcharts.chart('combo-histogram', {
                chart: {
                  type: 'column'
                },
                title: {
                  text: 'Highcharts Histogram'
                },
                xAxis: {
                  gridLineWidth: 1
                },
                yAxis: [{
                  title: {
                    text: 'Histogram Count'
                  }
                }, {
                  opposite: true,
                  title: {
                    text: 'Y value'
                  }
                }],
                series: [{
                  name: 'Histogram',
                  type: 'column',
                  data: histogram(data, 10),
                  pointPadding: 0,
                  groupPadding: 0,
                  pointPlacement: 'between'
                }, {
                  name: 'XY data',
                  type: 'scatter',
                  data: data,
                  yAxis: 1,
                  marker: {
                    radius: 1.5
                  }
                }]
              });


            </script>
            <div class="clearfix"></div>
          </div>
          <div class="clearfix visible-lg visible-md"></div>
        </div>
        <!--饼状图-->
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 title">
            <h2 id="pie">饼状图</h2>
          </div>
          <!--pie-basic-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>pie-basic</h3></div>
            <div id="pie-basic"></div>
            <script type="text/javascript">

              Highcharts.chart('pie-basic', {
                chart: {
                  plotBackgroundColor: null,
                  plotBorderWidth: null,
                  plotShadow: false,
                  type: 'pie'
                },
                title: {
                  text: 'Browser market shares January, 2015 to May, 2015'
                },
                tooltip: {
                  pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                  pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                      enabled: true,
                      format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                      style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                      }
                    }
                  }
                },
                series: [{
                  name: 'Brands',
                  colorByPoint: true,
                  data: [{
                    name: 'Microsoft Internet Explorer',
                    y: 56.33
                  }, {
                    name: 'Chrome',
                    y: 24.03,
                    sliced: true,
                    selected: true
                  }, {
                    name: 'Firefox',
                    y: 10.38
                  }, {
                    name: 'Safari',
                    y: 4.77
                  }, {
                    name: 'Opera',
                    y: 0.91
                  }, {
                    name: 'Proprietary or Undetectable',
                    y: 0.2
                  }]
                }]
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <!--pie-dount-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>pie-dount</h3></div>
            <div id="pie-dount"></div>
            <script type="text/javascript">
              var colors = Highcharts.getOptions().colors,
                categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
                data = [{
                  y: 56.33,
                  color: colors[0],
                  drilldown: {
                    name: 'MSIE versions',
                    categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0', 'MSIE 10.0', 'MSIE 11.0'],
                    data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13],
                    color: colors[0]
                  }
                }, {
                  y: 10.38,
                  color: colors[1],
                  drilldown: {
                    name: 'Firefox versions',
                    categories: ['Firefox v31', 'Firefox v32', 'Firefox v33', 'Firefox v35', 'Firefox v36', 'Firefox v37', 'Firefox v38'],
                    data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],
                    color: colors[1]
                  }
                }, {
                  y: 24.03,
                  color: colors[2],
                  drilldown: {
                    name: 'Chrome versions',
                    categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0', 'Chrome v33.0', 'Chrome v34.0',
                      'Chrome v35.0', 'Chrome v36.0', 'Chrome v37.0', 'Chrome v38.0', 'Chrome v39.0', 'Chrome v40.0', 'Chrome v41.0', 'Chrome v42.0', 'Chrome v43.0'
                    ],
                    data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, 5, 4.32, 3.68, 1.45],
                    color: colors[2]
                  }
                }, {
                  y: 4.77,
                  color: colors[3],
                  drilldown: {
                    name: 'Safari versions',
                    categories: ['Safari v5.0', 'Safari v5.1', 'Safari v6.1', 'Safari v6.2', 'Safari v7.0', 'Safari v7.1', 'Safari v8.0'],
                    data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],
                    color: colors[3]
                  }
                }, {
                  y: 0.91,
                  color: colors[4],
                  drilldown: {
                    name: 'Opera versions',
                    categories: ['Opera v12.x', 'Opera v27', 'Opera v28', 'Opera v29'],
                    data: [0.34, 0.17, 0.24, 0.16],
                    color: colors[4]
                  }
                }, {
                  y: 0.2,
                  color: colors[5],
                  drilldown: {
                    name: 'Proprietary or Undetectable',
                    categories: [],
                    data: [],
                    color: colors[5]
                  }
                }],
                browserData = [],
                versionsData = [],
                i,
                j,
                dataLen = data.length,
                drillDataLen,
                brightness;


              // Build the data arrays
              for (i = 0; i < dataLen; i += 1) {

                // add browser data
                browserData.push({
                  name: categories[i],
                  y: data[i].y,
                  color: data[i].color
                });

                // add version data
                drillDataLen = data[i].drilldown.data.length;
                for (j = 0; j < drillDataLen; j += 1) {
                  brightness = 0.2 - (j / drillDataLen) / 5;
                  versionsData.push({
                    name: data[i].drilldown.categories[j],
                    y: data[i].drilldown.data[j],
                    color: Highcharts.Color(data[i].color).brighten(brightness).get()
                  });
                }
              }

              // Create the chart
              Highcharts.chart('pie-dount', {
                chart: {
                  type: 'pie'
                },
                title: {
                  text: 'Browser market share, January, 2015 to May, 2015'
                },
                subtitle: {
                  text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>'
                },
                yAxis: {
                  title: {
                    text: 'Total percent market share'
                  }
                },
                plotOptions: {
                  pie: {
                    shadow: false,
                    center: ['50%', '50%']
                  }
                },
                tooltip: {
                  valueSuffix: '%'
                },
                series: [{
                  name: 'Browsers',
                  data: browserData,
                  size: '60%',
                  dataLabels: {
                    formatter: function () {
                      return this.y > 5 ? this.point.name : null;
                    },
                    color: '#ffffff',
                    distance: -30
                  }
                }, {
                  name: 'Versions',
                  data: versionsData,
                  size: '80%',
                  innerSize: '60%',
                  dataLabels: {
                    formatter: function () {
                      // display only if larger than 1
                      return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
                    }
                  }
                }]
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <!--pie-legend-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>pie-legend</h3></div>
            <div id="pie-legend" ></div>
            <script type="text/javascript">
              $(document).ready(function () {

                // Build the chart
                Highcharts.chart('pie-legend', {
                  chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                  },
                  title: {
                    text: 'Browser market shares January, 2015 to May, 2015'
                  },
                  tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                  },
                  plotOptions: {
                    pie: {
                      allowPointSelect: true,
                      cursor: 'pointer',
                      dataLabels: {
                        enabled: false
                      },
                      showInLegend: true
                    }
                  },
                  series: [{
                    name: 'Brands',
                    colorByPoint: true,
                    data: [{
                      name: 'Microsoft Internet Explorer',
                      y: 56.33
                    }, {
                      name: 'Chrome',
                      y: 24.03,
                      sliced: true,
                      selected: true
                    }, {
                      name: 'Firefox',
                      y: 10.38
                    }, {
                      name: 'Safari',
                      y: 4.77
                    }, {
                      name: 'Opera',
                      y: 0.91
                    }, {
                      name: 'Proprietary or Undetectable',
                      y: 0.2
                    }]
                  }]
                });
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <!--pie-monochrome-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>pie-monochrome</h3></div>
            <div id="pie-monochrome" ></div>
            <script type="text/javascript">
              // Make monochrome colors and set them as default for all pies
              Highcharts.getOptions().plotOptions.pie.colors = (function () {
                var colors = [],
                  base = Highcharts.getOptions().colors[0],
                  i;

                for (i = 0; i < 10; i += 1) {
                  // Start out with a darkened base color (negative brighten), and end
                  // up with a much brighter color
                  colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
                }
                return colors;
              }());

              // Build the chart
              Highcharts.chart('pie-monochrome', {
                chart: {
                  plotBackgroundColor: null,
                  plotBorderWidth: null,
                  plotShadow: false,
                  type: 'pie'
                },
                title: {
                  text: 'Browser market shares at a specific website, 2014'
                },
                tooltip: {
                  pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                  pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                      enabled: true,
                      format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                      style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                      }
                    }
                  }
                },
                series: [{
                  name: 'Brands',
                  data: [
                    { name: 'Microsoft Internet Explorer', y: 56.33 },
                    { name: 'Chrome', y: 24.03 },
                    { name: 'Firefox', y: 10.38 },
                    { name: 'Safari', y: 4.77 },
                    { name: 'Opera', y: 0.91 },
                    { name: 'Proprietary or Undetectable', y: 0.2 }
                  ]
                }]
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <!--pie-semi-cirle-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>pie-semi-cirle</h3></div>
            <div id="pie-semi-cirle" ></div>
            <script type="text/javascript">
              Highcharts.chart('pie-semi-cirle', {
                chart: {
                  plotBackgroundColor: null,
                  plotBorderWidth: 0,
                  plotShadow: false
                },
                title: {
                  text: 'Browser<br>shares<br>2015',
                  align: 'center',
                  verticalAlign: 'middle',
                  y: 40
                },
                tooltip: {
                  pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                  pie: {
                    dataLabels: {
                      enabled: true,
                      distance: -50,
                      style: {
                        fontWeight: 'bold',
                        color: 'white'
                      }
                    },
                    startAngle: -90,
                    endAngle: 90,
                    center: ['50%', '75%']
                  }
                },
                series: [{
                  type: 'pie',
                  name: 'Browser share',
                  innerSize: '50%',
                  data: [
                    ['Firefox',   10.38],
                    ['IE',       56.33],
                    ['Chrome', 24.03],
                    ['Safari',    4.77],
                    ['Opera',     0.91],
                    {
                      name: 'Proprietary or Undetectable',
                      y: 0.2,
                      dataLabels: {
                        enabled: false
                      }
                    }
                  ]
                }]
              });


            </script>
            <div class="clearfix"></div>
          </div>
          <!--pie-drilldown-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>pie-drilldown</h3>
            </div>
            <div id="pie-drilldown" ></div>
            <!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
            <pre id="tsv" >Browser Version    Total Market Share
Microsoft Internet Explorer 8.0    26.61%
Microsoft Internet Explorer 9.0    16.96%
Chrome 18.0    8.01%
Chrome 19.0    7.73%
Firefox 12    6.72%
Microsoft Internet Explorer 6.0    6.40%
Firefox 11    4.72%
Microsoft Internet Explorer 7.0    3.55%
Safari 5.1    3.53%
Firefox 13    2.16%
Firefox 3.6    1.87%
Opera 11.x    1.30%
Chrome 17.0    1.13%
Firefox 10    0.90%
Safari 5.0    0.85%
Firefox 9.0    0.65%
Firefox 8.0    0.55%
Firefox 4.0    0.50%
Chrome 16.0    0.45%
Firefox 3.0    0.36%
Firefox 3.5    0.36%
Firefox 6.0    0.32%
Firefox 5.0    0.31%
Firefox 7.0    0.29%
Proprietary or Undetectable    0.29%
Chrome 18.0 - Maxthon Edition    0.26%
Chrome 14.0    0.25%
Chrome 20.0    0.24%
Chrome 15.0    0.18%
Chrome 12.0    0.16%
Opera 12.x    0.15%
Safari 4.0    0.14%
Chrome 13.0    0.13%
Safari 4.1    0.12%
Chrome 11.0    0.10%
Firefox 14    0.10%
Firefox 2.0    0.09%
Chrome 10.0    0.09%
Opera 10.x    0.09%
Microsoft Internet Explorer 8.0 - Tencent Traveler Edition    0.09%</pre>
            <script type="text/javascript">
              // Create the chart
              Highcharts.chart('pie-drilldown', {
                chart: {
                  type: 'pie'
                },
                title: {
                  text: 'Browser market shares. January, 2015 to May, 2015'
                },
                subtitle: {
                  text: 'Click the slices to view versions. Source: netmarketshare.com.'
                },
                plotOptions: {
                  series: {
                    dataLabels: {
                      enabled: true,
                      format: '{point.name}: {point.y:.1f}%'
                    }
                  }
                },

                tooltip: {
                  headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                  pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
                },
                series: [{
                  name: 'Brands',
                  colorByPoint: true,
                  data: [{
                    name: 'Microsoft Internet Explorer',
                    y: 56.33,
                    drilldown: 'Microsoft Internet Explorer'
                  }, {
                    name: 'Chrome',
                    y: 24.03,
                    drilldown: 'Chrome'
                  }, {
                    name: 'Firefox',
                    y: 10.38,
                    drilldown: 'Firefox'
                  }, {
                    name: 'Safari',
                    y: 4.77,
                    drilldown: 'Safari'
                  }, {
                    name: 'Opera',
                    y: 0.91,
                    drilldown: 'Opera'
                  }, {
                    name: 'Proprietary or Undetectable',
                    y: 0.2,
                    drilldown: null
                  }]
                }],
                drilldown: {
                  series: [{
                    name: 'Microsoft Internet Explorer',
                    id: 'Microsoft Internet Explorer',
                    data: [
                      ['v11.0', 24.13],
                      ['v8.0', 17.2],
                      ['v9.0', 8.11],
                      ['v10.0', 5.33],
                      ['v6.0', 1.06],
                      ['v7.0', 0.5]
                    ]
                  }, {
                    name: 'Chrome',
                    id: 'Chrome',
                    data: [
                      ['v40.0', 5],
                      ['v41.0', 4.32],
                      ['v42.0', 3.68],
                      ['v39.0', 2.96],
                      ['v36.0', 2.53],
                      ['v43.0', 1.45],
                      ['v31.0', 1.24],
                      ['v35.0', 0.85],
                      ['v38.0', 0.6],
                      ['v32.0', 0.55],
                      ['v37.0', 0.38],
                      ['v33.0', 0.19],
                      ['v34.0', 0.14],
                      ['v30.0', 0.14]
                    ]
                  }, {
                    name: 'Firefox',
                    id: 'Firefox',
                    data: [
                      ['v35', 2.76],
                      ['v36', 2.32],
                      ['v37', 2.31],
                      ['v34', 1.27],
                      ['v38', 1.02],
                      ['v31', 0.33],
                      ['v33', 0.22],
                      ['v32', 0.15]
                    ]
                  }, {
                    name: 'Safari',
                    id: 'Safari',
                    data: [
                      ['v8.0', 2.56],
                      ['v7.1', 0.77],
                      ['v5.1', 0.42],
                      ['v5.0', 0.3],
                      ['v6.1', 0.29],
                      ['v7.0', 0.26],
                      ['v6.2', 0.17]
                    ]
                  }, {
                    name: 'Opera',
                    id: 'Opera',
                    data: [
                      ['v12.x', 0.34],
                      ['v28', 0.24],
                      ['v27', 0.17],
                      ['v29', 0.16]
                    ]
                  }]
                }
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <div class="clearfix visible-lg visible-md"></div>
        </div>
        <!--3D图-->
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 title">
            <h2 id="3d">3D图</h2>
          </div>
          <!--3d-pie-->
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 demo">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer-container"><h3>3d-pie</h3></div>
            <div id="3d-pie" style="height: 400px"></div>
            <script type="text/javascript">
              Highcharts.chart('3d-pie', {
                chart: {
                  type: 'pie',
                  options3d: {
                    enabled: true,
                    alpha: 45,
                    beta: 0
                  }
                },
                title: {
                  text: 'Browser market shares at a specific website, 2014'
                },
                tooltip: {
                  pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                  pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    depth: 35,
                    dataLabels: {
                      enabled: true,
                      format: '{point.name}'
                    }
                  }
                },
                series: [{
                  type: 'pie',
                  name: 'Browser share',
                  data: [
                    ['Firefox', 45.0],
                    ['IE', 26.8],
                    {
                      name: 'Chrome',
                      y: 12.8,
                      sliced: true,
                      selected: true
                    },
                    ['Safari', 8.5],
                    ['Opera', 6.2],
                    ['Others', 0.7]
                  ]
                }]
              });
            </script>
            <div class="clearfix"></div>
          </div>
          <div class="clearfix visible-lg visible-md"></div>
        </div>

      </div>
    </div>
  </div>
</main>
</body>
</html>